<!DOCTYPE html >
<html>
<head>
    <title>Pie Representation-Highcharts QBuilder</title>
    
    <script type="text/javascript" src="../../../libraries/jquery-1.6.2.min.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/highcharts.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/modules/exporting.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/themes/gray.js"></script>

    <script type="text/javascript">
      var chart;
      $(document).ready(function() {
          chart = new Highcharts.Chart({
              chart: {
              renderTo: 'container',
              defaultSeriesType: 'column'
          },
          title: {
              text: 'Nombre de commande par acheteur, classer par categorie de produit'
          },
          credits: {
              text: 'QueryBuilder'
          },
          xAxis: {
              categories: ['albert', 'jim', 'joe', 'tom']
          },
          yAxis: {
              min: 0,
              title: {
                  text: 'Quantite de commande'
              },
              stackLabels: {
                  enabled: true,
                  style: {
                      fontWeight: 'bold',
                      color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                  }
              }
          },
          legend: {
              align: 'right',
              x: -100,
              verticalAlign: 'top',
              y: 20,
              floating: true,
              backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
              borderColor: '#CCC',
              borderWidth: 1,
              shadow: false
          },
          tooltip: {
              formatter: function() {
                  return '<b>'+ this.x +'</b><br/>'+this.series.name +': '+ this.y +'<br/>'+'Total: '+ this.point.stackTotal;
              }
          },
          plotOptions: {
              column: {
                  stacking: 'normal',
                  dataLabels: {
                      enabled: true,
                      color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                  }
              }
          },
          series: [{
              name: 'stuff',
              data: [126, 115, 104, 109]
          }, {
              name: 'tool',
              data: [123, 119, 101, 113]
          }, {
              name: 'toy',
              data: [120, 108, 101, 114]
          }]
      });
});
    </script>

</head>
<body>
    <div id="container" style="height:410px; margin: 0 2em; min-width: 600px">
</body>
</html>
